<template>
	<div class="survey_result_wrapper">
		<div class="head">
			<el-page-header @back="handleBackList" :content="pageTitle"></el-page-header>
			<span>答题人数：{{ dataCount }}人</span>
		</div>
		<el-row type="flex">
			<el-col
				:span="hurveyUserData.length > 0 ? 8 : 24"
				class="answer_user_wrapper"
				v-infinite-scroll="loadAnswerUser"
				:infinite-scroll-disabled="isDisabled"
				v-loading="loading"
			>
				<template v-if="isLoad && !loading && hurveyUserData.length === 0">
					<el-empty :image-size="100" description="暂时无人答题"></el-empty>
				</template>
				<template v-else>
					<dl :class="{ active: item.id === activeValue }" v-for="(item, index) in hurveyUserData" :key="index" @click="handleLookAnswer(item.id)">
						<dt>答题用户{{ index + 1 }}</dt>
						<dd>{{ item.createTime }}</dd>
					</dl>
					<p class="loading" v-if="loading">加载中</p>
					<p class="moreover" v-if="!loading && moreover">没有更多了</p>
				</template>
			</el-col>
			<el-col v-if="hurveyUserData.length > 0" :span="16" class="answer_list_wrapper" v-loading="answerLoading">
				<div class="item" v-for="(item, index) in hurveyAnswerList" :key="index">
					<dl>
						<dt>{{ index + 1 }}、({{ item.type | subjectType }}) {{ item.title }}</dt>
						<dd v-for="(v, i) in item.option" :key="i">{{ letterValue.charAt(i) }}、{{ v }}</dd>
					</dl>
					<p>
						答案：
						<template v-if="item.type !== 3 && item.type !== 5">
							<el-tag type="warning" v-for="(n, j) in item.answer" :key="j">{{ letterValue.charAt(n) }}</el-tag>
						</template>
						<template v-else>
							{{ item.answer }}
						</template>
					</p>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { tbStudentQuestionnaireInfoQuery, tbStudentQuestionnaireInfoGetStuContent } from '@/api/admin/survey/tbStudentQuestionnaireInfo';
export default {
	data() {
		return {
			loading: false,
			listQuery: {
				page: 1,
				limit: 10
			},
			dataCount: 0,
			hurveyUserData: [],
			hurveyAnswerList: [],
			answerLoading: false,
			isLoad: false,
			activeValue: '',
			letterValue: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
		};
	},
	computed: {
		questionId() {
			return this.$route.query.id;
		},
		moreover() {
			return this.listQuery.limit >= this.dataCount;
		},
		isDisabled() {
			return this.loading || this.moreover;
		},
		pageTitle() {
			return decodeURIComponent(this.$route.query.title);
		}
	},
	filters: {
		subjectType(value) {
			if (value === 1) {
				return '单选题';
			} else if (value === 2) {
				return '多选题';
			} else if (value === 3) {
				return '填空题';
			} else if (value === 4) {
				return '填空题';
			} else if (value === 5) {
				return '填空题';
			}
		}
	},
	watch: {
		questionId: {
			handler(val) {
				if (!val) return false;
				this.loading = true;
				this.getSurveyUserList();
			},
			immediate: true
		},
		activeValue(val) {
			this.answerLoading = true;
			this.getSurveyAnswerData(val);
		}
	},
	methods: {
		//获取问卷答题丽列表
		async getSurveyUserList() {
			let params = { page: 1, limit: this.listQuery.limit, questionId: this.questionId };
			let result = await tbStudentQuestionnaireInfoQuery(params).then((res) => res.data);
			this.isLoad = true;
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.hurveyUserData = !result.data ? [] : [...result.data];
				if (this.hurveyUserData.length > 0) {
					this.activeValue = this.hurveyUserData[0].id;
				}
			}
		},

		//加载答题用户
		loadAnswerUser() {
			if (this.moreover) return false;
			this.listQuery.page++;
			this.listQuery.limit = this.listQuery.page * 10;
			this.getSurveyUserList();
		},

		//获取用户答案
		async getSurveyAnswerData(id) {
			let params = { id, questionId: this.questionId };
			let result = await tbStudentQuestionnaireInfoGetStuContent(params).then((res) => res.data);
			this.answerLoading = false;
			if (result.code === '0') {
				let datas = !result.data ? {} : { ...result.data[0] };
				this.hurveyAnswerList = this.formatSubjectData(datas.stuContentList);
				console.log(this.hurveyAnswerList);
			}
		},

		//格式化题目数据
		formatSubjectData(arr) {
			console.log(arr);
			return arr.map((item) => {
				let obj = { id: item.id, title: item.content, type: parseInt(item.type) };
				let optArr = Object.keys(item).filter((v) => v.indexOf('questionOption') !== -1);
				obj['option'] = optArr.map((v) => item[v]);
				if (obj.type !== 3 && obj.type !== 5) {
					let answerArr = item.answer.split(',');
					obj['answer'] = [];
					obj.option.forEach((n, i) => {
						if (answerArr.indexOf(n) !== -1) {
							obj['answer'].push(i);
						}
					});
				} else {
					obj['answer'] = item.answer;
				}
				return obj;
			});
		},

		//查看用户答题答案
		handleLookAnswer(id) {
			if (this.activeValue === id || !!this.answerLoading) return false;
			this.activeValue = id;
		},

		//返回问卷列表页面
		handleBackList() {
			this.$router.replace({
				path: '/admin/column/survey'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.survey_result_wrapper {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 212px);
	.head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 24px;
		padding-bottom: 15px;
		border-bottom: solid 1px #eee;
	}
	.el-row {
		flex: 1;
		overflow: hidden;
	}
}
.answer_user_wrapper {
	overflow: auto;
	&::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		height: 10px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 2px;
		/*background: #fd7286;*/
		transition: color 0.2s ease;
		background-color: rgba(0, 0, 0, 0.15);
	}
	dl {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		line-height: 24px;
		border-bottom: solid 1px #eee;
		cursor: pointer;
		&:hover {
			background-color: #d9ecff;
		}
		&.active {
			color: #fff;
			background-color: #409eff;
			dd {
				color: #fff;
			}
		}
	}
	dd {
		font-size: 14px;
		color: #999;
	}
	p.loading,
	p.moreover {
		color: #ccc;
		text-align: center;
		padding: 10px 0;
	}
	p.loading::after {
		content: '...';
		animation: showDot 1.5s linear infinite;
	}
}
.answer_list_wrapper {
	overflow: auto;
	border-left: solid 1px #ddd;
	&::-webkit-scrollbar-track {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

	&::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 10px;
		height: 10px;
	}

	&::-webkit-scrollbar-thumb {
		cursor: pointer;
		border-radius: 2px;
		/*background: #fd7286;*/
		transition: color 0.2s ease;
		background-color: rgba(0, 0, 0, 0.15);
	}
	.item {
		padding: 15px;
		border-top: solid 1px #eee;
	}
	dl {
		border-top: dashed 1px #eee;
		&:first-child {
			border-top: none;
		}
	}
	dt {
		font-size: 16px;
		font-weight: bold;
	}
	p {
		margin-top: 10px;
		span {
			margin-right: 10px;
		}
	}
}

@keyframes showDot {
	0% {
		content: '';
	}
	33.3333% {
		content: '.';
	}
	66.6666% {
		content: '..';
	}
	100% {
		content: '...';
	}
}
</style>
